<template>
  <view class="message-container">
    <view v-for="(message, index) in messages" :key="index" class="message-bubble" :class="{ 'from-me': message.fromMe }">
      <text>{{ message.content }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '你好！', fromMe: true },
        { content: '你好呀！', fromMe: false },
        { content: '今天过得怎么样？', fromMe: true },
      ]
    };
  }
}
</script>

<style>
.message-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.message-bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 15px;
  margin: 5px 0;
  position: relative;
}

.from-me {
  background-color: #dcf8c6; /* 自己发送的消息颜色 */
  align-self: flex-end; /* 右对齐 */
}

.message-bubble:not(.from-me) {
  background-color: #f1f0f0; /* 其他人的消息颜色 */
  align-self: flex-start; /* 左对齐 */
}
</style>